// Style for desktop.

@media screen and (min-width: $screen-sm) {
  .bc-table {
    thead {
      display: table-header-group;

      .bc-platforms {
        th {
          vertical-align: revert;
        }
      }
    }

    td,
    th {
      background: inherit;
      padding: 0.25rem;
      width: 2rem;
    }

    td.bc-support {
      padding: 0;

      > button {
        padding: 0.25rem;
      }
    }

    tr.bc-history-desktop {
      display: table-row;
    }
  }

  .table-scroll {
    overflow: auto;
    width: 100vw;
    margin: 0 -3rem;
  }

  .table-scroll-inner {
    padding: 0 3rem;
    position: relative;
    min-width: max-content;

    &:after {
      position: absolute;
      width: 10px;
      height: 10px;
      bottom: 0;
      right: 0;
      content: "";
    }
  }

  .bc-support-level,
  .bc-browser-name {
    display: none;
  }

  .bc-notes-list {
    margin-left: 20%;
    width: auto;
  }

  .bc-support {
    .bc-support-level {
      display: none;
    }

    &[aria-expanded="true"] {
      position: relative;

      &:after {
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 2px;
        width: 100%;
        background: var(--text-primary);
        content: "";
      }

      .bc-history-mobile {
        display: none;
      }
    }
  }

  .bc-has-history {
    cursor: pointer;

    &:hover {
      background: var(--background-secondary);
    }
  }
}
